<template>
  <main class="main-container">
    <el-tabs v-model="activeName" type="card" class="el-tabs">
      <el-tab-pane
        v-for="tabInfo in tabInfos"
        :key="tabInfo.lable"
        :label="tabInfo.lable"
        :name="tabInfo.lable"
        class="el-tab-pane"
      >
        <component :is="tabInfo.component"></component>
      </el-tab-pane>
    </el-tabs>
  </main>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import ReadTestView from '../components/devices/ReadTest.vue';
import WriteTestView from '../components/devices/WriteTest.vue';
import ConfigurationView from '../components/devices/DeviceConfiguration.vue';

const activeName = ref('设备配置');
const tabInfos = [
  {
    lable: '设备配置',
    component: ConfigurationView
  },
  {
    lable: '读取测试',
    component: ReadTestView
  },
  {
    lable: '写入测试',
    component: WriteTestView
  }
];
</script>

<style  scoped lang="scss">
.main-container {
  height: 100%;
  width: 100%;
  .el-tabs {
    height: 100%;
    width: 100%;
    .el-tab-pane {
      height: 100%;
      width: 100%;
    }
  }
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-bottom-color: white;
  // border 宽度调整为2像素，这样才会遮住 tabs 栏的底部边框
  border-bottom-width: 2px;
}
</style>